<template>
  <vxe-layout-container vertical>
    <vxe-layout-header class="layout-header">
      <Query :queryConfig="QueryConfig" @QueryEvent="handleQuery"></Query>
    </vxe-layout-header>
    <vxe-layout-body class="layout-body">
      <vxe-grid ref="maingrid" v-bind="GridOptions" @cell-click="handleMainGridCellClick">
        <template #operation="{ row }">
          <vxe-button :size="componentSize" mode="text" status="success" content="收款" @click="handleReceiveConfirm(row)"
            v-if="btnPromission.receiconfirm.buttonCaption" />
          <vxe-button :size="componentSize" mode="text" status="success" content="开票" @click="handleInvoiceConfirm(row)"
            v-if="btnPromission.invoiconfirm.buttonCaption" />
        </template>
        <template #receiveStatus="{ row }">
          <vxe-tag v-if="row.skzt == 'N'" status='error' content="未收款"></vxe-tag>
          <vxe-tag v-else status='success' content="已收款"></vxe-tag>
        </template>
        <template #invoiceStatus="{ row }">
          <vxe-tag v-if="row.kpzt == 'N'" status='error' content="未开票"></vxe-tag>
          <vxe-tag v-else status='success' content="已开票"></vxe-tag>
        </template>
      </vxe-grid>
      <vxe-pager :align="PagerConfig.align" :size="componentSize" :current-page.sync="PagerConfig.currentPage"
        :page-size.sync="PagerConfig.pageSize" :total="PagerConfig.total" @page-change="handlePageChange"></vxe-pager>
      <el-tabs typc="card" v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="收款明细" name="first">
          <vxe-grid ref="receiveGrid" v-bind="ReceiveGridOptions" @toolbar-tool-click="handleReceiveToolClick">
            <template #operation="{ row }">
              <template v-if="hasReceiveEditStatus(row)">
                <vxe-button :size="componentSize" mode="text" status="primary" @click="handleReceiveSave(row)"
                  content="保存" />
                <vxe-button :size="componentSize" mode="text" status="danger" @click="handleReceiveCancel"
                  content="取消" />
              </template>
              <template v-else>
                <vxe-button :size="componentSize" mode="text" status="primary" content="编辑"
                  @click="handleReceiveEdit(row)" v-if="btnPromission.edit.buttonCaption" />
                <vxe-button :size="componentSize" mode="text" status="danger" content="删除"
                  @click="handleReceiveDelete(row)" v-if="btnPromission.delete.buttonCaption" />
              </template>
            </template>
            <template #receiveStatus="{ row }">
              <vxe-tag v-if="row.skzt == 'N'" status='error' content="未收款"></vxe-tag>
              <vxe-tag v-else status='success' content="已收款"></vxe-tag>
            </template>
          </vxe-grid>
        </el-tab-pane>
        <el-tab-pane label="开支明细" name="second">
          <vxe-grid ref="expensesGrid" v-bind="ExpensesGridOptions" @toolbar-tool-click="handleExpensesToolClick">
            <template #operation="{ row }">
              <template v-if="hasExpensesEditStatus(row)">
                <vxe-button :size="componentSize" mode="text" status="primary" @click="handleExpensesSave(row)"
                  content="保存" />
                <vxe-button :size="componentSize" mode="text" status="danger" @click="handleExpensesCancel"
                  content="取消" />
              </template>
              <template v-else>
                <vxe-button :size="componentSize" mode="text" status="primary" content="编辑"
                  @click="handleExpensesEdit(row)" v-if="btnPromission.edit.buttonCaption" />
                <vxe-button :size="componentSize" mode="text" status="danger" content="删除"
                  @click="handleExpensesDelete(row)" v-if="btnPromission.delete.buttonCaption" />
              </template>
            </template>
            <template #expensesStatus="{ row }">
              <vxe-tag v-if="row.kzzt == 'N'" status='error' content="未支付"></vxe-tag>
              <vxe-tag v-else status='success' content="已支付"></vxe-tag>
            </template>
          </vxe-grid>
        </el-tab-pane>
        <el-tab-pane label="开票明细" name="third">
          <vxe-grid ref="invoiceGrid" v-bind="InvoiceGridOptions" @toolbar-tool-click="handleInvoiceToolClick">
            <template #operation="{ row }">
              <template v-if="hasInvoiceEditStatus(row)">
                <vxe-button :size="componentSize" mode="text" status="primary" @click="handleInvoiceSave(row)"
                  content="保存" />
                <vxe-button :size="componentSize" mode="text" status="danger" @click="handleInvoiceCancel"
                  content="取消" />
              </template>
              <template v-else>
                <vxe-button :size="componentSize" mode="text" status="primary" content="编辑"
                  @click="handleInvoiceEdit(row)" v-if="btnPromission.edit.buttonCaption" />
                <vxe-button :size="componentSize" mode="text" status="danger" content="删除"
                  @click="handleInvoiceDelete(row)" v-if="btnPromission.delete.buttonCaption" />
              </template>
            </template>
            <template #invoiceStatus="{ row }">
              <vxe-tag v-if="row.kpzt == 'N'" status='error' content="未开票"></vxe-tag>
              <vxe-tag v-else status='success' content="已开票"></vxe-tag>
            </template>
          </vxe-grid>
        </el-tab-pane>
        <el-tab-pane label="快递明细" name="fourth">
          <vxe-grid ref="expressGrid" v-bind="ExpressGridOptions" @toolbar-tool-click="handleExpressToolClick">
            <template #operation="{ row }">
              <template v-if="hasExpressEditStatus(row)">
                <vxe-button :size="componentSize" mode="text" status="primary" @click="handleExpressSave(row)"
                  content="保存" />
                <vxe-button :size="componentSize" mode="text" status="danger" @click="handleExpressCancel"
                  content="取消" />
              </template>
              <template v-else>
                <vxe-button :size="componentSize" mode="text" status="primary" content="编辑"
                  @click="handleExpressEdit(row)" v-if="btnPromission.edit.buttonCaption" />
                <vxe-button :size="componentSize" mode="text" status="danger" content="删除"
                  @click="handleExpressDelete(row)" v-if="btnPromission.delete.buttonCaption" />
              </template>
            </template>
          </vxe-grid>
        </el-tab-pane>
      </el-tabs>
      
    </vxe-layout-body>
    <vxe-modal v-model="dskModal" title="待收款录入" :width="1200" :height="680">
        <vxe-grid ref="receiveGrid2" v-bind="ReceiveGridOptions2">
          <template #operation="{ row }">
            <template v-if="hasReceiveEditStatus2(row)">
              <vxe-button :size="componentSize" mode="text" status="primary" @click="handleReceiveSave2(row)"
                content="保存" />
              <vxe-button :size="componentSize" mode="text" status="danger" @click="handleReceiveCancel2"
                content="取消" />
            </template>
            <template v-else>
              <vxe-button :size="componentSize" mode="text" status="primary" content="编辑"
                @click="handleReceiveEdit2(row)" v-if="btnPromission.edit.buttonCaption" />
            </template>
          </template>
          <template #receiveStatus="{ row }">
            <vxe-tag v-if="row.skzt == 'N'" status='error' content="未收款"></vxe-tag>
            <vxe-tag v-else status='success' content="已收款"></vxe-tag>
          </template>
        </vxe-grid>
    </vxe-modal>

    <vxe-modal v-model="qdModal" title="渠道信息选择" :width="800" :height="380">
        <vxe-grid ref="supplierGrid" v-bind="SupplierGridOptions">
          <template #operation="{ row }">
              <vxe-button :size="componentSize" mode="text" status="primary" content="选择"
                @click="handleSupplierGridSelect(row)"/>           
          </template>
        </vxe-grid>
    </vxe-modal>
  </vxe-layout-container>
</template>
<style></style>
<script>
import ProjectFinance from './index.js';
export default ProjectFinance;
</script>
